<template>
  <!-- 计划周期 -->
  <div id="plan-cycle">
    <div class="operate-form">
      <a-button type="primary" @click="addPlanCycle">新增计划周期</a-button>
    </div>
    <a-table :columns="columns" :data-source="data">
      <template #action="{ record }">
        <a-space>
          <a>编辑</a>
          <a-popconfirm
            v-if="data.length"
            title="确定删除?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="onDelete(record.key)"
          >
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <a-modal
      v-model:visible="visiblePlanCycle"
      title="新增计划周期"
      width="800px"
      @ok="handleCancel"
    >
      <a-form
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="计划周期名称">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="计划周期时间范围">
          <a-range-picker
            v-model:value="formState.date1"
            :placeholder="['开始日期', '结束日期']"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="计划填报开始时间">
          <a-date-picker
            v-model:value="formState.date2"
            show-time
            type="date"
            placeholder="请选择计划填报开始时间"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="计划填报截至时间">
          <a-date-picker
            v-model:value="formState.date3"
            show-time
            type="date"
            placeholder="请选择计划填报截至时间"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="取消" @click="handleCancel">取消</a-button>
        <a-button key="确认" type="primary" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "计划周期名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "计划周期时间范围",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "计划填报开始时间",
          dataIndex: "t3",
          key: "t3",
        },
        {
          title: "计划填报截至时间",
          key: "t2",
          dataIndex: "t2",
        },
        {
          title: "创建时间",
          key: "t1",
          dataIndex: "t1",
        },
        {
          title: "操作",
          key: "action",
          slots: { customRender: "action" },
        },
      ],
      data: [
        {
          key: "1",
          name: "2019项目年度计划",
          age: "2019-2021",
          t3: "2021-7-14",
          t2: "2021-7-14",
          t1: "2021-7-14 14:45",
        },
        {
          key: "2",
          name: "2019项目年度计划",
          age: "2019-2021",
          t3: "2021-7-14",
          t2: "2021-7-14",
          t1: "2021-7-14 14:45",
        },
      ],

      visiblePlanCycle: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formState: {
        name: "",
        date1: "",
        date2: "",
        date3: "",
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},
  methods: {
    addPlanCycle() {
      // 新增计划周期
      this.visiblePlanCycle = true;
    },

    onDelete(key) {
      // 删除当前行
      alert("删除当前行  key为" + key);
    },

    handleOk() {
      // 确认
      this.visiblePlanCycle = false;
    },

    handleCancel() {
      // 取消
      this.visiblePlanCycle = false;
    },
  },
};
</script>
<style lang='less' scoped>
#plan-cycle {
  .operate-form {
    display: flex;
    justify-content: flex-end;
  }
}
</style>